<template>
  <div class="btnRadioBContainer">
    <label v-for="(option, index) in options" :key="index">
      <input
        type="radio"
        name="radio"
        :value="option.value"
        v-model="selectedValue"
      />
      <div class="btnRadioBItemContent"><card_d /></div>
    </label>
  </div>
</template>

<script setup lang="ts">
import card_d from "../cards/card_d.vue";

const selectedValue = ref("a");
defineExpose({
  selectedValue,
});

const options = [
  { value: "a", year: 2025, moon: 3, day: 9, title: "", content: "" },
  { value: "b", year: 2025, moon: 3, day: 9, title: "", content: "" },
  { value: "c", year: 2025, moon: 3, day: 9, title: "", content: "" },
  { value: "d", year: 2025, moon: 3, day: 9, title: "", content: "" },
  { value: "e", year: 2025, moon: 3, day: 9, title: "", content: "" },
];
</script>

<style scoped lang="scss">
.btnRadioBContainer {
  @include rel_cen_hw(664px, 726px);
  flex-direction: column;
  align-content: space-between;
  // justify-items: stretch;
  flex-shrink: 0;
}

.btnRadioBContainer {
  label {
    //   @include relative_hw(132px, 100%);
    height: 132px;
    width: 100%;

    input[type="radio"] {
      clip: rect(0 0 0 0);
      clip-path: inset(100%);
      height: 1px;
      overflow: hidden;
      position: absolute;
      white-space: nowrap;
      width: 1px;
    }

    .btnRadioBItemContent {
      cursor: pointer;
      @include rel_cen_hw(100%, 100%);
      background: #ffffff;
      transition: all 0.5s ease;
    }

    input[type="radio"]:checked + .btnRadioBItemContent {
      background: #fafafa;
      border: 1px solid #035db9;
      z-index: 9;
      &::before {
        content: "";
        position: absolute;
        height: 100%;
        width: 5px;
        background: #035db9;
        left: 0;
        z-index: 10;
      }
    }
  }
}
</style>
